<template>
  <!--ref的作用是告诉bscroll转动的是哪部分？-->
  <!--ref的作用是帮助获取DOM-->
  <div class="list" ref="wrapper">
    <div>
      <div class="area">
        <div class="title border-topbottom">当前城市</div>
        <div class="button-list">
          <div class="button-wrapper">
            <button class="button">北京</button>
          </div>
        </div>
      </div>
      <div class="area">
        <div class="title border-topbottom">热门城市</div>
        <div class="button-list">
          <div class="button-wrapper" :key="item.id" v-for="item in hot">
            <button class="button">{{item.name}}</button>
          </div>
        </div>
      </div>
      <!--在使用:key="key"时一定要谨记不要使key重名-->
      <!--父级与子级的key值一样是没有关系的-->
      <div class="area"
           v-for="(item, key) in city"
           :key="key"
           :ref="key">
        <div class="title border-topbottom">{{key}}</div>
        <div class="item-list">
          <!--part可以使用innerItem来代替，相当于一个标记-->
          <div class="item border-topbottom"
               v-for="part of item"
               :key="part.id">
            {{part.name}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* 引入BetterScroll组件 */
import BetterScroll from 'better-scroll'
export default {
  name: 'CityList',
  /* 为什么使用mounted的原因在于可以自动进行函数的调用 */
  mounted () {
    this.scroll = new BetterScroll(this.$refs.wrapper)
  },
  props: {
    hot: Array,
    city: Object,
    letter: String
  },
  watch: {
    letter () {
      if (this.letter) {
        const element = this.$refs[this.letter][0]
        console.log(element)
        /* scrollToElement里面使用的必须为DOM元素或者DOM选择器 */
        this.scroll.scrollToElement(element)
      }
      /* ESLint: 'letter' is not defined. (no-undef),所以需要写成this.letter */
      /* watch监听器只在letter发生变化的时候才会触发 */
      /* console.log(this.letter) */
    }
  }
}
</script>

<style lang="stylus" scoped>
  .border-topbottom
    &:before
      border-color: #ccc
    &:after
      border-color: #ccc
  /* 这样做的目的是使在下拉页面的时候头部还在显示 */
  .list
    overflow: hidden
    position: absolute
    top: 2.95rem
    bottom: 0
    left: 0
    right: 0
    .title
      /* line-height翻译为行高 */
      line-height: .5rem
      background: #cacaca
      padding: 0 5.5rem 0 .2rem
      font-size: large
      text-align: left
    .button-list
      line-height: .8rem
      /* 设置padding-right的目的是使得右侧的字母表有空间放置 */
      padding: .1rem .6rem .1rem .1rem
      overflow: hidden
      //display: flex
      //flex-direction: row
      //flex-wrap: wrap
      .button-wrapper
        /* 此处为content的大小 */
        width: 33.33%
        float: left
        .button
          border: .02rem solid #ccc
          padding: .05rem .5rem
          text-align: center
    .item-list
      .item
        line-height: .7rem
        padding-left: .2rem
        text-align: left
</style>
